<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="商家名称" prop="merchantId">
        <el-select 
          v-model="queryParams.merchantId" 
          placeholder="请选择商家" 
          filterable 
          :loading="merchantLoading"
          class="!w-240px"
          popper-class="invoice-select-dropdown"
          clearable
          @focus="handleSelectFocus"
          @visible-change="handleVisibleChange"
          @filter-method="handleSearch"
        >
          <el-option
            v-for="item in merchantList"
            :key="item.id"
            :label="item.merchantName"
            :value="item.id"
          />
          <template #dropdown>
            <div class="merchant-select-content">
              <div v-if="merchantList.length === 0" class="merchant-empty">
                <el-empty description="暂无数据" />
              </div>
              <div v-if="hasMore && !merchantLoading" class="merchant-loading">
                <el-icon class="is-loading"><Loading /></el-icon>
                <span class="loading-text">加载更多...</span>
              </div>
            </div>
          </template>
        </el-select>
      </el-form-item>
      <el-form-item label="发票抬头" prop="invoiceTitle">
        <el-input
          v-model="queryParams.invoiceTitle"
          placeholder="请输入发票抬头"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="税号" prop="taxNumber">
        <el-input
          v-model="queryParams.taxNumber"
          placeholder="请输入税号"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="发票类型" prop="invoiceType">
        <el-select
          v-model="queryParams.invoiceType"
          placeholder="请选择发票类型"
          clearable
          class="!w-240px"
        >
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.INVOICE_TYPE)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
     
      <el-form-item label="开票状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择状态"
          clearable
          class="!w-240px"
        >
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.INVOICE_STATUS)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
    
 


      <el-form-item label="发票代码" prop="invoiceCode">
        <el-input
          v-model="queryParams.invoiceCode"
          placeholder="请输入发票代码"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="发票号码" prop="invoiceNumber">
        <el-input
          v-model="queryParams.invoiceNumber"
          placeholder="请输入发票号码"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
     
      <el-form-item label="创建时间" prop="createTime">
        <el-date-picker
          v-model="queryParams.createTime"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
          class="!w-220px"
        />
      </el-form-item>
     
    
     
      <el-form-item>
        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
        <el-button
          type="primary"
          plain
          @click="openForm('create')"
          v-hasPermi="['juliang:invoice-record:create']"
        >
          <Icon icon="ep:plus" class="mr-5px" /> 新增
        </el-button>
        <el-button
          type="success"
          plain
          @click="handleExport"
          :loading="exportLoading"
          v-hasPermi="['juliang:invoice-record:export']"
        >
          <Icon icon="ep:download" class="mr-5px" /> 导出
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
      <el-table-column label="主键ID" align="center" prop="id" />
      <el-table-column label="商家名称" align="center" prop="merchantName" />
      <el-table-column label="发票抬头" align="center" prop="invoiceTitle" />
      <el-table-column label="税号" align="center" prop="taxNumber" />
      <el-table-column label="发票类型" align="center" min-width="120px" prop="invoiceType">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.INVOICE_TYPE" :value="scope.row.invoiceType" />
        </template>
      </el-table-column>
      <el-table-column label="开票金额" align="center" prop="amount" />
      <el-table-column label="开票状态" align="center" prop="status">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.INVOICE_STATUS" :value="scope.row.status" />
        </template>
      </el-table-column>
      <!-- <el-table-column label="联系人" align="center" prop="contactName" />
      <el-table-column label="联系电话" align="center" prop="contactPhone" />
      <el-table-column label="联系邮箱" align="center" prop="contactEmail" /> -->
      <el-table-column label="开户银行" align="center" prop="bankName" />
      <el-table-column label="银行账号" align="center" prop="bankAccount" />
      <!-- <el-table-column label="公司地址" align="center" prop="companyAddress" />
      <el-table-column label="公司电话" align="center" prop="companyPhone" /> -->
      <el-table-column label="发票代码" align="center" prop="invoiceCode" />
      <el-table-column label="发票号码" align="center" prop="invoiceNumber" />
      <el-table-column label="电子发票" align="center" prop="pdfUrl" width="120px">
        <template #default="scope">
          <el-button
            v-if="scope.row.pdfUrl"
            link
            type="primary"
            @click="downloadInvoicePdf(scope.row.pdfUrl, scope.row.invoiceTitle)"
          >
            <Icon icon="ep:download" class="mr-1" />
            下载发票
          </el-button>
          <span v-else class="text-gray-400">未上传</span>
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        align="center"
        prop="createTime"
        :formatter="dateFormatter"
        width="180px"
      />
      <el-table-column label="操作人" align="center" prop="operatorName" />
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="操作" align="center" min-width="200px" fixed="right">
        <template #default="scope">
          <el-button
            link
            type="primary"
            @click="openForm('update', scope.row.id)"
            v-hasPermi="['juliang:invoice-record:update']"
          >
            编辑
          </el-button>
          <el-button
            v-if="scope.row.status === 0"
            link
            type="success"
            @click="openInvoiceDialog(scope.row)"
            v-hasPermi="['juliang:invoice-record:update']"
          >
            开具发票
          </el-button>
          <el-button
            v-if="scope.row.status === 1"
            link
            type="warning"
            @click="handleVoidInvoice(scope.row)"
            v-hasPermi="['juliang:invoice-record:update']"
          >
            作废发票
          </el-button>
          <el-button
            link
            type="danger"
            @click="handleDelete(scope.row.id)"
            v-hasPermi="['juliang:invoice-record:delete']"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>

  <!-- 表单弹窗：添加/修改 -->
  <InvoiceRecordForm ref="formRef" @success="getList" />
  
  <!-- 开具发票弹窗 -->
  <el-dialog
    v-model="openInvoiceDialogVisible"
    title="开具发票"
    width="1000px"
    :close-on-click-modal="false"
  >
    <el-form
      ref="openInvoiceFormRef"
      :model="openInvoiceFormData"
      :rules="openInvoiceFormRules"
      label-width="100px"
      v-loading="openInvoiceLoading"
    >
      <el-form-item label="发票记录">
        <el-input 
          :value="`${currentInvoiceRecord?.merchantName || '商家'} - ${currentInvoiceRecord?.invoiceTitle || '未填写发票抬头'}`"
          disabled
        />
      </el-form-item>
      <el-form-item label="发票抬头" prop="invoiceTitle" required>
        <el-input
          v-model="openInvoiceFormData.invoiceTitle"
          placeholder="请输入发票抬头"
          disabled
        />
      </el-form-item>
      <el-form-item label="税号" prop="taxNumber" required>
        <el-input
          v-model="openInvoiceFormData.taxNumber"
          placeholder="请输入税号"
          disabled
        />
      </el-form-item>
      <el-form-item label="发票类型" prop="invoiceType" required>
        <el-select
          v-model="openInvoiceFormData.invoiceType"
          placeholder="请选择发票类型"
          disabled
          class="!w-240px"
        >
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.INVOICE_TYPE)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="开票金额" prop="amount" required>
        <el-input-number
          v-model="openInvoiceFormData.amount"
          :precision="2"
          :step="0.01"
          :min="0"
          placeholder="请输入开票金额"
          disabled
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="开票状态" prop="status" required>
        <el-radio-group v-model="openInvoiceFormData.status">
          <el-radio :label="1">开票成功</el-radio>
          <el-radio :label="2">开票失败</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="电子发票" prop="pdfUrl" required>
        <UploadFile 
          v-model="openInvoiceFormData.pdfUrl" 
          :file-type="['pdf']"
          :file-size="10"
          :limit="1"
          :drag="true"
          list-type="text"
          @upload-start="handleFileUploadStart"
          @upload-success="handleFileUploadSuccess"
          @upload-error="handleFileUploadError"
        />
        <div class="upload-tip">
          <el-text v-if="fileUploading" type="primary" size="small" class="upload-status">
            <el-icon class="is-loading"><Loading /></el-icon>
            文件上传中，请稍候...
          </el-text>
        </div>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input 
          v-model="openInvoiceFormData.remark"
          type="textarea"
          :rows="3"
          placeholder="请输入备注信息"
          maxlength="500"
          show-word-limit
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="openInvoiceDialogVisible = false" :disabled="fileUploading">取消</el-button>
      <el-button 
        type="primary" 
        @click="handleOpenInvoiceSubmit" 
        :loading="openInvoiceLoading"
        :disabled="fileUploading || !openInvoiceFormData.pdfUrl"
      >
        {{ fileUploading ? '文件上传中...' : '确定开具' }}
      </el-button>
    </template>
  </el-dialog>


</template>

<script setup lang="ts">
import { getIntDictOptions, getStrDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
import { CommonStatusEnum } from '@/utils/constants'
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import { InvoiceRecordApi, InvoiceRecordVO } from '@/api/juliang/invoice'
import { MerchantApi } from '@/api/juliang/merchant'
import { MerchantVO } from '@/api/juliang/merchant'
import { Loading } from '@element-plus/icons-vue'
import { throttle, debounce } from 'lodash-es'
import InvoiceRecordForm from './InvoiceRecordForm.vue'

import { createImageViewer } from '@/components/ImageViewer'

/** 商品图预览 */
const imagePreview = (imgUrl: string) => {
  createImageViewer({
    urlList: [imgUrl]
  })
}

/** 发票记录 列表 */
defineOptions({ name: 'InvoiceRecord' })

const message = useMessage() // 消息弹窗

const { t } = useI18n() // 国际化

const loading = ref(true) // 列表的加载中
const list = ref<InvoiceRecordVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const merchantList = ref<MerchantVO[]>([]) // 商家列表
const merchantLoading = ref(false) // 商家列表加载状态
const hasMore = ref(true) // 是否还有更多数据
const loadingNewPage = ref(false) // 标记是否正在加载新页面
const searchKeyword = ref('') // 搜索关键字

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  merchantId: undefined,
  invoiceTitle: undefined,
  taxNumber: undefined,
  invoiceType: undefined,
  amount: undefined,
  status: undefined,
  contactName: undefined,
  contactPhone: undefined,
  contactEmail: undefined,
  bankName: undefined,
  bankAccount: undefined,
  companyAddress: undefined,
  companyPhone: undefined,
  invoiceCode: undefined,
  invoiceNumber: undefined,
  pdfUrl: undefined,
  rejectReason: undefined,
  createTime: [],
  operatorId: undefined,
  operatorName: undefined,
  remark: undefined,
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中

// 开具发票相关
const openInvoiceDialogVisible = ref(false) // 开票弹窗显示状态
const openInvoiceLoading = ref(false) // 开票加载状态
const fileUploading = ref(false) // 文件上传中状态
const openInvoiceFormRef = ref() // 开票表单引用
const currentInvoiceRecord = ref<InvoiceRecordVO | null>(null) // 当前选中的发票记录
const openInvoiceFormData = reactive({
  id: undefined as number | undefined,
  status: 1, // 默认开票成功
  pdfUrl: '',
  remark: '',
  invoiceTitle: '', // 发票抬头
  taxNumber: '', // 税号
  invoiceType: undefined as number | undefined, // 发票类型
  amount: undefined as number | undefined // 开票金额
})

// 开票表单验证规则
const openInvoiceFormRules = reactive({
  status: [
    { required: true, message: '请选择开票状态', trigger: 'change' }
  ],
  pdfUrl: [
    { required: true, message: '请上传电子发票PDF文件', trigger: 'change' }
  ],
  invoiceTitle: [
    { required: true, message: '请输入发票抬头', trigger: 'blur' }
  ],
  taxNumber: [
    { required: true, message: '请输入税号', trigger: 'blur' }
  ],
  invoiceType: [
    { required: true, message: '请选择发票类型', trigger: 'change' }
  ],
  amount: [
    { required: true, message: '请输入开票金额', trigger: 'blur' },
    { type: 'number', min: 0, message: '开票金额必须为大于0的数字', trigger: 'blur' }
  ]
}) as any // 临时解决类型问题

const merchantQuery = reactive({
  pageNo: 1,
  pageSize: 10,
  merchantName: undefined as string | undefined
})

/** 获取商家列表 */
const getMerchantList = async (isLoadMore = false) => {
  if (merchantLoading.value || (isLoadMore && !hasMore.value)) return
  
  if (isLoadMore) {
    loadingNewPage.value = true
  } else {
    merchantLoading.value = true
  }

  try {
    const data = await MerchantApi.getMerchantPage({
      pageNo: merchantQuery.pageNo,
      pageSize: merchantQuery.pageSize,
      merchantName: searchKeyword.value
    })
    
    if (data?.list?.length > 0) {
      merchantList.value = isLoadMore 
        ? [...merchantList.value, ...data.list]
        : data.list
      hasMore.value = data.list.length === merchantQuery.pageSize
    } else {
      if (!isLoadMore) {
        merchantList.value = []
      }
      hasMore.value = false
    }
  } catch (error) {
    console.error('获取商家列表失败:', error)
    message.error('获取商家列表失败')
    if (!isLoadMore) {
      merchantList.value = []
    }
  } finally {
    merchantLoading.value = false
    loadingNewPage.value = false
  }
}

/** 监听下拉框滚动 */
const handleDropdownScroll = throttle(async (e: Event) => {
  const target = e.target as HTMLElement
  const { scrollTop, scrollHeight, clientHeight } = target
  
  // 距离底部50px时预加载下一页
  if (scrollHeight - scrollTop - clientHeight < 50 && hasMore.value && !loadingNewPage.value) {
    merchantQuery.pageNo++
    await getMerchantList(true)
  }
}, 200)

/** 处理下拉框显示状态变化 */
const handleVisibleChange = (visible: boolean) => {
  if (visible) {
    // 下拉框显示时，添加滚动监听
    nextTick(() => {
      const dropdownWrapper = document.querySelector('.invoice-select-dropdown .el-select-dropdown__wrap')
      if (dropdownWrapper) {
        dropdownWrapper.addEventListener('scroll', handleDropdownScroll)
      }
    })
  } else {
    // 下拉框隐藏时，移除滚动监听
    const dropdownWrapper = document.querySelector('.invoice-select-dropdown .el-select-dropdown__wrap')
    if (dropdownWrapper) {
      dropdownWrapper.removeEventListener('scroll', handleDropdownScroll)
    }
  }
}

/** 处理搜索 */
const handleSearch = debounce((query: string) => {
  searchKeyword.value = query.trim()
  merchantQuery.pageNo = 1
  hasMore.value = true
  merchantList.value = []
  getMerchantList()
}, 300)

/** 处理下拉框获得焦点 */
const handleSelectFocus = () => {
  if (merchantList.value.length === 0) {
    searchKeyword.value = ''
    merchantQuery.pageNo = 1
    hasMore.value = true
    getMerchantList()
  }
}

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await InvoiceRecordApi.getInvoiceRecordPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  // 重置商家相关的状态
  merchantList.value = []
  hasMore.value = true
  merchantQuery.pageNo = 1
  searchKeyword.value = ''
  handleQuery()
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await InvoiceRecordApi.deleteInvoiceRecordById(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}

/** 修改状态 */
const handleStatusChange = async (row: InvoiceRecordVO) => {
  try {
    // 修改状态的二次确认
    const text = row.status === CommonStatusEnum.ENABLE ? '启用' : '停用'
    await message.confirm('确认要' + text + '该发票记录吗?')
    // 发起修改状态
    await InvoiceRecordApi.updateInvoiceRecordStatus(row.id, row.status)
    // 刷新列表
    await getList()
  } catch (e){
    console.log(e)
    // 取消后，进行恢复按钮
    row.status =
        row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE : CommonStatusEnum.ENABLE
  }
}

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await InvoiceRecordApi.exportInvoiceRecord(queryParams)
    download.excel(data, '发票记录.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}

/** 打开开具发票弹窗 */
const openInvoiceDialog = (row: InvoiceRecordVO) => {
  currentInvoiceRecord.value = row
  openInvoiceFormData.id = row.id
  openInvoiceFormData.pdfUrl = row.pdfUrl || ''
  openInvoiceFormData.remark = row.remark || ''
  openInvoiceFormData.status = 1 // 默认开票成功
  openInvoiceFormData.invoiceTitle = row.invoiceTitle || ''
  openInvoiceFormData.taxNumber = row.taxNumber || ''
  openInvoiceFormData.invoiceType = row.invoiceType
  openInvoiceFormData.amount = row.amount
  fileUploading.value = false
  openInvoiceDialogVisible.value = true
}

/** 文件上传开始 */
const handleFileUploadStart = () => {
  fileUploading.value = true
}

/** 文件上传成功 */
const handleFileUploadSuccess = () => {
  fileUploading.value = false
}

/** 文件上传失败 */
const handleFileUploadError = () => {
  fileUploading.value = false
  message.error('文件上传失败，请重试')
}

/** 处理开票提交 */
const handleOpenInvoiceSubmit = async () => {
  try {
    // 检查是否有文件正在上传
    if (fileUploading.value) {
      message.warning('文件正在上传中，请稍候...')
      return
    }
    
    // 检查是否已选择文件
    if (!openInvoiceFormData.pdfUrl) {
      message.warning('请先上传PDF文件')
      return
    }
    
    // 表单验证
    await openInvoiceFormRef.value?.validate()
    
    openInvoiceLoading.value = true
    
    // 调用开票接口
    await InvoiceRecordApi.openInvoice({
      id: openInvoiceFormData.id!,
      status: openInvoiceFormData.status,
      pdfUrl: openInvoiceFormData.pdfUrl,
      remark: openInvoiceFormData.remark,
      invoiceTitle: openInvoiceFormData.invoiceTitle,
      taxNumber: openInvoiceFormData.taxNumber,
      invoiceType: openInvoiceFormData.invoiceType!,
      amount: openInvoiceFormData.amount!
    })
    
    message.success('发票开具成功')
    openInvoiceDialogVisible.value = false
    
    // 重置状态和清空表单
    fileUploading.value = false
    openInvoiceFormData.pdfUrl = ''
    openInvoiceFormData.remark = ''
    openInvoiceFormData.status = 1
    openInvoiceFormData.invoiceTitle = ''
    openInvoiceFormData.taxNumber = ''
    openInvoiceFormData.invoiceType = undefined
    openInvoiceFormData.amount = undefined
    
    // 刷新列表
    await getList()
  } catch (error) {
    console.error('开票失败:', error)
    message.error('开票失败，请重试')
  } finally {
    openInvoiceLoading.value = false
  }
}

/** 作废发票 */
const handleVoidInvoice = async (row: InvoiceRecordVO) => {
  try {
    await message.confirm('确认要作废该发票吗？作废后不可恢复。')
    
    await InvoiceRecordApi.updateInvoiceRecord({
      id: row.id,
      status: 0
    })
    
    message.success('发票作废成功')
    await getList()
  } catch (error) {
    console.error('作废发票失败:', error)
    if (error !== 'cancel') {
      message.error('作废发票失败，请重试')
    }
  }
}

/** 下载电子发票 */
const downloadInvoicePdf = (pdfUrl: string, invoiceTitle?: string) => {
  if (!pdfUrl) {
    message.warning('暂无PDF文件')
    return
  }
  
  console.log('下载PDF URL:', pdfUrl)
  
  // 处理PDF URL
  let fullPdfUrl = pdfUrl
  
  // 如果是相对路径，添加域名前缀
  if (pdfUrl.startsWith('/')) {
    fullPdfUrl = window.location.origin + pdfUrl
  } else if (!pdfUrl.startsWith('http')) {
    // 如果不是完整URL，尝试添加基础路径
    const baseUrl = import.meta.env.VITE_BASE_URL || window.location.origin
    fullPdfUrl = baseUrl + (pdfUrl.startsWith('/') ? '' : '/') + pdfUrl
  }
  
  console.log('处理后的PDF URL:', fullPdfUrl)
  
  // 生成文件名
  const fileName = invoiceTitle 
    ? `${invoiceTitle}_发票_${Date.now()}.pdf`
    : `发票_${Date.now()}.pdf`
  
  // 直接下载文件
  try {
    const link = document.createElement('a')
    link.href = fullPdfUrl
    link.download = fileName
    link.target = '_blank'
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    
    message.success('开始下载电子发票')
  } catch (error) {
    console.error('下载失败:', error)
    message.error('下载失败，请重试')
    
    // 备用方案：在新窗口打开
    window.open(fullPdfUrl, '_blank')
  }
}

/** 初始化 **/
onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
.merchant-select-content {
  .merchant-empty {
    padding: 20px;
    text-align: center;
  }
  
  .merchant-loading {
    padding: 8px 0;
    text-align: center;
    background-color: var(--el-bg-color);
    border-top: 1px solid var(--el-border-color-lighter);
    
    .el-icon {
      margin-right: 6px;
      font-size: 16px;
      color: var(--el-color-primary);
      vertical-align: middle;
    }
    
    .loading-text {
      font-size: 13px;
      color: var(--el-text-color-secondary);
      vertical-align: middle;
    }
  }
}

:deep(.el-select-dropdown__wrap) {
  max-height: 300px;
}

:deep(.el-select-dropdown__list) {
  padding: 0;
}

// 上传弹窗样式
.upload-tip {
  margin-top: 8px;
  
  .upload-status {
    display: block;
    margin-top: 4px;
    
    .el-icon {
      margin-right: 4px;
      font-size: 14px;
    }
  }
}

// 上传弹窗表单样式
:deep(.el-dialog__body) {
  padding: 20px 20px 10px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
}

:deep(.el-textarea__inner) {
  resize: vertical;
}
</style>